<template>
  <div ref="Vform">
    <el-form
      ref="form"
      :disabled="disabled"
      :model="form"
      :inline="inline"
      :rules="rules"
      :label-width="labelWidth"
      class="form"
    >
      <el-form-item
        :label="item.title"
        :prop="item.key"
        v-for="item in options"
        :key="item.key"
        :class="formItemClassHandle(item)"
      >
        <div v-if="$slots[item.key]">
          <slot :name="item.key"></slot>
        </div>
        <div v-else class="w100">
          <el-input
            class="w100max"
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'clickText'"
            @click.native="handleChange($event,item.event)"
            :placeholder="
              item.placeholder ? item.placeholder : '请点击选择' + item.title
            "
            :disabled="item.disabled"
            readonly
          ></el-input>
          <el-input
            class="w100max"
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'text'"
            :placeholder="
              item.placeholder ? item.placeholder : '请输入' + item.title
            "
            :disabled="item.disabled"
            clearable
          ></el-input>
          <el-input
            class="w100max"
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'number-input'"
            type='number'
            :placeholder="
              item.placeholder ? item.placeholder : '请输入' + item.title
            "
            :disabled="item.disabled"
            clearable
          ></el-input>
          <el-input
            class="w100max"
            :size="size"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 6 }"
            :placeholder="
              item.placeholder ? item.placeholder : '请输入' + item.title
            "
            v-model="form[item.key]"
            v-if="item.type === 'textarea'"
            :disabled="item.disabled"
          >
          </el-input>
          <el-switch
            class="w100max"
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'switch'"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :disabled="item.disabled"
          >
          </el-switch>
          <el-date-picker
            class="w100max"
            type="year"
            :size="size"
            :placeholder="
              item.placeholder ? item.placeholder : '请选择' + item.title
            "
            v-model="form[item.key]"
            value-format="yyyy"
            v-if="item.type === 'dateYear'"
            :disabled="item.disabled"
          >
          </el-date-picker>
          <el-time-picker
            class="w100max"
            :size="size"
            :placeholder="
              item.placeholder ? item.placeholder : '请选择' + item.title
            "
            v-model="form[item.key]"
            value-format="HH:mm:ss"
            v-if="item.type === 'time'"
            :disabled="item.disabled"
          >
          </el-time-picker>
          <el-date-picker
            class="w100max"
            type="date"
            :placeholder="
              item.placeholder ? item.placeholder : '请选择' + item.title
            "
            value-format="yyyy-MM-dd"
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'date'"
            :disabled="item.disabled"
          ></el-date-picker>
          <el-date-picker
            class="w100max"
            type="datetime"
            :placeholder="
              item.placeholder ? item.placeholder : '请选择' + item.title
            "
            value-format="yyyy-MM-dd HH:mm:ss"
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'datetime'"
            :disabled="item.disabled"
          ></el-date-picker>
          <el-date-picker
            class="w100max"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'date-to-date'"
            :disabled="item.disabled"
          ></el-date-picker>
          <el-date-picker
            class="w100max"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'datetime-to-datetime'"
            :disabled="item.disabled"
          ></el-date-picker>
          <el-input-number
            class="w100max"
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'number'"
            :disabled="item.disabled"
          ></el-input-number>
          <el-select
            class="w100max"
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'select'"
            clearable
            @change="handleChange($event,item.event)"
            :placeholder="
              item.placeholder ? item.placeholder : '请选择' + item.title
            "
            :disabled="item.disabled"
            :multiple="item.multiple"
          >
            <el-option
              v-for="data in item.option.data"
              :key="data[item.option.props.key]"
              :label="data[item.option.props.label]"
              :value="data[item.option.props.value]"
            >
            </el-option>
          </el-select>
          <el-cascader
            class="w100max"
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'cascader'"
            :disabled="item.disabled"
            :options="item.option.data"
            :props="item.option.props"
            @change="handleChange($event,item.event)"
            clearable
          ></el-cascader>
          <el-radio-group
            class="w100max"
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'radio'"
            :disabled="item.disabled"
          >
            <el-radio
              v-for="data in item.option.data"
              :key="data[item.option.props.key]"
              :label="data[item.option.props.value]"
              >{{ data[item.option.props.label] }}</el-radio
            >
          </el-radio-group>
          <el-checkbox-group
            class="w100max"
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'checkbox'"
            :disabled="item.disabled"
          >
            <el-checkbox
              v-for="data in item.option.data"
              :key="data[item.option.props.key]"
              :label="data[item.option.props.label]"
              >{{ data[item.option.props.label] }}</el-checkbox
            >
          </el-checkbox-group>
          <eleVUpload
            ref="eleVUpload"
            v-if="item.type === 'file'"
            :disabled="item.disabled"
            :accept="item.accept"
            :upload-type="item.fileType"
            :uploadTextTip="item.uploadTextTip"
            :listType="item.listType"
            :fileList="form[item.key]"
            :limit="item.limit"
            @upLoadSuccess="upLoadSuccess($event,item.key)"
            @removeFileList="removeFileList($event,item.key)"
            @toGetSuccessData="toGetSuccessData"
          ></eleVUpload>
          <mapPositionVue
            ref="mapPosition"
            v-if="item.type === 'mapPosition'"
            :disabled="item.disabled"
            :initMapData="form[item.key]"
            @addressInputChange="changeAddress($event,item.key)"
            @changeAddress="changeAddress($event,item.key)">
          </mapPositionVue>
          <gdAreaSelectVue
            ref="gdAreaSelect"
            class="w100max"
            v-if="item.type === 'gdAreaSelect'"
            v-model="form[item.key]"
            :disabled="item.disabled"
            @changeGdArea="changeGdArea"
            :size="size"
          />
          <treeselect
            v-if="item.type === 'treeSelect'"
            :disabled="item.disabled"
            v-model="form[item.key]"
            :multiple="item.multiple ? item.multiple : false"
            :options="item.options"
            :clear-value-text="$t('common.clear')"
            :placeholder="item.placeholder ? item.placeholder : '请选择' + item.title"
          />
        </div>
      </el-form-item>
      <slot name="options"></slot>
    </el-form>
  </div>
</template>

<script>
import eleVUpload from '@/components/eleUpload/eleUpload'
import mapPositionVue from '@/components/MapPosition/mapPosition.vue'
import gdAreaSelectVue from '@/components/GdAreaSelect/GdAreaSelect.vue'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  name: "VForms",
  components:{
      eleVUpload,
      mapPositionVue,gdAreaSelectVue,Treeselect
  },
  props: {
    disabled: {
      type: Boolean,
      default: function() {
        return false;
      }
    },
    // 表单
    form: {
      type: Object,
      default: function() {
        return {};
      }
    },
    // 表单配置
    options: {
      type: Array,
      default: function() {
        return [];
      }
    },
    // 表单验证规则
    rules: {
      type: Object,
      default: function() {
        return {};
      }
    },
    // 是否行内表单
    inline: {
      type: Boolean,
      default: function() {
        return true;
      }
    },
    // 一行显示几个
    rowspan:{
        type:Number,
        default:1
    },
    // 表单表头宽度
    labelWidth: {
      type: String,
      default: function() {
        return "80px";
      }
    },
    // 控件大小
    size: {
      type: String,
      default: function() {
        return "medium";
      }
    },
  },
  data() {
    return {
       Url: process.env.VUE_APP_BASE_API + 'file/api/download/',
    };
  },
  mounted() {
    // 动态添加验证
    this.addRules(this.options);
    // 初始化完成清除一下表单验证规则
    this.$nextTick(function() {
      this.clearValidate();
    });
    //自定义css名称
    this.$refs.Vform.style.setProperty('--labelWidth',this.labelWidth)
  },
  methods: {
    handleChange(e,methods){
      if(methods){
        this.$emit('toLoadMethods',methods)
      }
    },
    toGetSuccessData(data){
      console.log('toGetSuccessData===',data)
    },
    upLoadSuccess(e,key){
      this.form[key] = e.newFileList
         console.log('upLoadSuccess===',e,this.form)
    },
    removeFileList(fileList,key){
      console.log('removeFileList======+',fileList)
      this.form[key] = fileList
    },
    /**
     * @description: 动态添加表单验证
     */
    addRules(options) {
      for (let i = 0; i < options.length; i++) {
        // 判断是否需要添加验证
        if (options[i].rules) {
          // 判断用户是否已经自定义验证了
          if (!this.rules[options[i].key]) {
            // 动态生成验证方法
            let data = [
              {
                required: true,
                message: "",
                trigger: ""
              }
            ];
            // 动态添加验证方式：失去焦点触发/确认时触发
            if (options[i].type === ("input" || "text")) {
              data[0].message = "请输入" + options[i].title;
              data[0].trigger = "blur";
            } else {
              data[0].message = "请选择" + options[i].title;
              data[0].trigger = "change";
            }
            // 触发vue更新
            this.$set(this.rules, options[i].key, data);
          }
        }
      }
    },
    /**
     * @description: 表单验证
     */
    validate() {
      let isValidate = false;
      this.$refs.form.validate(valid => {
        if (valid) {
          isValidate = true;
        }
      });
      return isValidate;
    },
    /**
     * @description: 清除表单验证
     */
    clearValidate() {
      this.$refs.form.clearValidate();
    },
    changeAddress(e,key){
      // console.log('getAddress===',e,key)
      // this.form[key] = e
      this.$emit('changeAddress',e)
    },
    changeGdArea(e){
      // console.log('changeGdArea===',e)
      this.$emit('changeGdArea',e)
    },
    formItemClassHandle(item){
      if(item.type === 'mapPosition'){
        return 'w100'
      }else{
        return (item.columnWidth)?item.columnWidth:'w33'
      }
    }
  }
};
</script>

<style lang="scss" scoped>
  @import "@/styles/element-variables.scss";
 .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

 .el-upload:hover {
  border-color: #409eff;
}
.w33{
  width: 33%;
}
.w50{
    width: 49%;
}
.w66{
    width: 66%;
}
.w100{
    width: 98%;
}
.w100max{
    width: 100%;
}

/* 2023.9.9 按运管服的样式进行了修改 ----------------开始------------------------- */
::v-deep .el-form--inline .el-form-item__label{
  display: block;
  text-align: left;
}
::v-deep .el-form--inline .el-form-item{
  margin-bottom: 16px;
  margin-right: 0%;
  padding-right: 10px;
}
::v-deep .el-form--inline .el-form-item:nth-child(3n){
  /* margin-right: 0px; */
}
::v-deep .el-form-item__content{
  /* width: calc(100% - var(--labelWidth)); */
  width: 100%;
}
::v-deep .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before, .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before{
  content: "";
  color: #F56C6C;
  margin-left: 0px;
}
::v-deep .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:after, .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:after{
  content: "*";
  color: #F56C6C;
  margin-left: 4px;
}
::v-deep .el-form{
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
}
/* 2023.9.9 按运管服的样式进行了修改 ----------------结束------------------------- */

/* 2023.10.12 禁用转态样式修改 ----------------开始------------------------- */
::v-deep .is-disabled .el-input__inner  {
  background-color:white;
  //color: rgb(0, 0, 0);
}
::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner{
  border-color: $--color-primary;
  background: $--color-primary;
}
::v-deep .el-radio__input.is-disabled + span.el-radio__label{
  color: rgb(0, 0, 0);
}
::v-deep .el-textarea.is-disabled .el-textarea__inner{
  background: white;
  /*color: rgb(0, 0, 0);*/
}
/* 2023.10.12 禁用转态样式修改 ----------------结束------------------------- */
</style>
